<template>
  <el-container>
    <el-dialog
      v-model="dialogVisible"
      title="新增操作"
      width="30%"
      center
      draggable
    >
      <el-form
        :model="form"
        class="addform"
        label-width="auto"
        :rules="addrules"
        ref="ruleFormRef"
      >
        <el-form-item label="矿泉水名称:" prop="wname">
          <el-input v-model="form.wname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="售卖价:" prop="price">
          <el-input v-model.number="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="进货价:" prop="purchase">
          <el-input
            v-model.number="form.purchase"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="种类:" prop="type">
          <el-select
            v-model="form.type"
            placeholder="选择种类"
            style="width: 100%"
          >
            <el-option
              v-for="item in type"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择商品名:">
          <el-upload
            list-type="picture-card"
            ref="upload"
            action="http://localhost:9000/storehouse/water/add"
            :on-success="handleAvatarSuccess"
            headers="application/json"
            :auto-upload="false"
            limit="1"
            :file-list="uploadimg"
            name="file"
            :data="form"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmadd()">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="editVisible"
      title="编辑操作"
      width="30%"
      center
      draggable
    >
      <el-form
        :model="editform"
        class="addform"
        label-width="auto"
        :rules="addrules"
        ref="editFormRef"
      >
        <el-form-item label="商品名称:" prop="wname">
          <el-input v-model="editform.wname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="矿泉水数量:" prop="price">
          <el-input
            v-model.number="editform.price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="空桶数量:" prop="purchase">
          <el-input
            v-model.number="editform.purchase"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="种类:" prop="type">
          <el-select
            v-model="editform.type"
            placeholder="选择种类"
            style="width: 100%"
          >
            <el-option
              v-for="item in type"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择商品名:">
          <el-upload
            list-type="picture-card"
            ref="editload"
            action="http://localhost:9000/storehouse/water/edit"
            :on-success="handleEditSuccess"
            headers="application/json"
            :auto-upload="false"
            limit="1"
            :file-list="editimg"
            name="file"
            :data="editform"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmedit()">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-header class="head">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="input1" placeholder="请输入商品名字">
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button type="primary" @click="select(input1)">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="dialogVisible = true"
            >新增</el-button
          >
        </el-col>

        <el-col :span="8"></el-col>
        <el-col :span="3"><span>矿泉水分类表</span></el-col>
      </el-row>
    </el-header>

    <el-main class="table-box">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="changemult"
      >
        <el-table-column type="selection" width="100" />
        <el-table-column
          type="index"
          width="50"
          :index="indexMethod"
          label="编号"
        />
        <el-table-column prop="wname" label="矿泉水名称" width="300">
        </el-table-column>
        <el-table-column prop="price" label="售卖价" width="100">
        </el-table-column>
        <el-table-column prop="purchase" label="进货价" width="100">
        </el-table-column>
        <el-table-column prop="type" label="分类" width="200">
        </el-table-column>
        <el-table-column  label="图片" width="200">
             <template v-slot="scope">
              <img :src="scope.row.imgurl" alt="" style="width: 50px;height: 50px">
          </template>
        </el-table-column>

        <el-table-column label="单项操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <div class="pagin">
      <el-pagination
        layout="prev, pager, next"
        :total="totalNumber"
        :page-size="Pagesize"
        :pager-count="10"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-container>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getwater, getwaterdata } from "@/apis/storeData.js";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: {
    Search,
  },

  data() {
    return {
      type: ["水", "其他"],
    };
  },
  setup() {
    let multipleSelection = ref("");
    const input1 = ref("");
    const dialogVisible = ref(false);

    let totalNumber = ref(0);
    let currentPage = ref(1);
    let Pagesize = ref(5);
    let editVisible = ref(false);
    let uploadimg = ref([]);
    let editimg = ref([]);
    let listdata = ref("");
    let tableData = ref("");

    const form = reactive({
      wid: "",
      wname: "",
      price: "",
      purchase: "",
      type: "",
    });

    const editform = reactive({
      wid: "",
      wname: "",
      price: "",
      purchase: "",
      type: "",
    });


    const addrules = reactive({
      wname: [
        {
          required: true,
          message: "请输入矿泉水名",
          trigger: "blur",
        },
      ],
      price: [
        {
          required: true,
          message: "请输入矿泉水数量",
          trigger: "blur",
        },
        { type: "number", message: "类型必须为数字" },
      ],
      purchase: [
        {
          required: true,
          message: "请输入空桶数量",
          trigger: "blur",
        },
        { type: "number", message: "类型必须为数字" },
      ],
      type: [
        {
          required: true,
          message: "请输入空桶数量",
          trigger: "blur",
        },
      ],
    });

    onMounted(() => {
      getdata();
    });

    function getdata() {
      let page = currentPage.value;
      let size = Pagesize.value;
      getwater().then((res) => {
        listdata.value = res.data.page.list;
        totalNumber.value = res.data.page.list.length;
        tableData.value = res.data.page.list.slice(
          page * size - size,
          page * size
        );
      });
    }

    function select(prop) {
      let name = { key: prop };
      getwaterdata(name).then((res) => {
        window.console.log(res.data.page.list);
        listdata.value = res.data.page.list;
        totalNumber.value = res.data.page.list.length;
        currentPage.value = 1;
        tableData.value = res.data.page.list.slice(0, Pagesize.value);
      });
    }

    function handleEdit(index, row) {
      editVisible.value = true;
      editform.wid = row.wid;
      editform.wname = row.wname;
      editform.price = row.price;
      editform.purchase = row.purchase;
      editform.type = row.type;
    }

    function confirmadd() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
          dialogVisible.value = false;
        }
      });
    }

    function confirmedit() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.$refs.editload.submit();
          editVisible.value = false;
        }
      });
    }

    function handleCurrentChange(page) {
      currentPage.value = page;
      let size = Pagesize.value;
      tableData.value = listdata.value.slice(page * size - size, page * size);
    }

    function indexMethod(index) {
      return index + 1 + (currentPage.value - 1) * Pagesize.value;
    }

    function changemult(val) {
      let ids = [];
      for (let i in val) {
        ids.push(val[i].id);
      }
      multipleSelection.value = ids;
    }

    function handleAvatarSuccess() {

      ElMessage({
        message: "新增商品成功",
        type: "success",
      });
            getdata();
    }

    function handleEditSuccess() {

      ElMessage({
        message: "编辑商品成功",
        type: "success",
      });
            getdata();
    }

    return {
      input1,
      tableData,
      multipleSelection,
      dialogVisible,
      editVisible,
      select,
      addrules,
      confirmadd,
      indexMethod,
      editform,
      totalNumber,
      currentPage,
      Pagesize,
      handleEdit,
      confirmedit,
      form,
      uploadimg,
      changemult,
      editimg,
      handleCurrentChange,
      handleEditSuccess,
      handleAvatarSuccess,
    };
  },
});
</script>
<style scoped>
.head {
  font-size: 18px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
.addform >>> .el-form-item {
  padding-left: 8%;
}
.addform >>> .el-input {
  width: 80%;
}
.pagin {
  text-align: center;
  margin-left: -10%;
}
</style>